<template>
  <div class="header">
    <h1>智慧水厂管控一体化平台</h1>
    <div class="position-absolute bottom-0 left-30px h-[41px] flex num z-[1]">
      <!--      时间-->
      <div class="time flex  h-full items-center">
        <div class="font-size-[38px] line-height-[41px]">{{ timeSecond }}</div>
        <div class="flex flex-col h-full items-center justify-evenly ml-[3.5px]">
          <span class="font-size-[15px]">{{ timeMonth }}</span>
          <span class="font-size-[12px]">{{ week }}</span>
        </div>
      </div>
      <!--      天气-->
      <div class="weather flex items-center justify-center ml-[30px]">
        <img
          class="w-[24px] h-[24px] object-contain"
          src="./imgs/weather.png"
          alt="weather"
        />
        <div class="flex flex-col h-full  justify-center ml-[4px]">
          <span class="font-size-[10px]">今天</span>
          <span class="font-size-[16px]">22℃~29℃</span>
        </div>
      </div>
<!--      班组-->
      <div class="team flex items-end justify-center ml-[77px] pb-[4px]">
        <img
          class="w-[24px] h-[24px] object-contain"
          src="@/assets/images/icons/team.svg"
          alt="team"
        />
        <div class="ml-[6px]"> 班组早（03）</div>
      </div>
    </div>
    <div class="flex position-absolute  bottom-0  right-30px pb-[4px]">
<!--      实时报警-->
      <div class="flex items-center mr-44px">
        <img
            class="w-[24px] h-[24px] object-contain"
            src="@/assets/images/icons/alarm.svg"
            alt="team"
        />
        <span  class="ml-6px cursor-pointer">实时报警（0）</span>
      </div>
<!--数据中心-->
      <div class="flex items-center mr-44px" @click="toDataCenter">
        <img
            class="w-[24px] h-[24px] object-contain"
            src="@/assets/images/icons/DC.svg"
            alt="team"
        />
        <span class="ml-6px cursor-pointer">数据中心</span>
      </div>
<!--      欢迎你-->
    <div class="flex items-center ">
      <img
          class="w-[24px] h-[24px] object-contain"
          src="@/assets/images/icons/user.svg"
          alt="team"
      />
      <span class="m-x-10px">admin，欢迎你</span>
      <img
          class="w-[24px] h-[24px] object-contain cursor-pointer"
          src="@/assets/images/icons/quit.svg"
          alt="team"
      />
    </div>
    </div>
  </div>
</template>

<script setup>
import router from '@/router'
import Cookies from 'js-cookie'
import { sleep } from '@/utils/sleep'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import { onMounted, ref } from 'vue'
import { getAuthToken } from '@/plugins/axios.js'

const timeMonth = ref('')
const timeSecond = ref('')
const week = ref('')
const init = async () => {
  //     获取时间
  timeMonth.value = dayjs().format('MM-DD')
  timeSecond.value = dayjs().format('HH:mm:ss')
  //     获取中文星期几
  week.value = getWeek(dayjs().format('dddd'))
}
const getWeek = () => {
  const weekList = ['日', '一', '二', '三', '四', '五', '六']
  return '星期' + weekList[dayjs().day()]
}
const outLogin = async () => {
  console.log('退出登录')
  Cookies.remove('DA_TONG_YU_HE_AUTH_TOKEN')
  message.success('退出登录成功')
  await sleep(1000)
  await  router.push('/login')
}
const toDataCenter = () => {
  return
  window.open(`http://192.168.0.212/daiyu/#/?token=${getAuthToken()}`,"_blank")
}
onMounted(() => {
  init()
  setInterval(() => {
    timeSecond.value = dayjs().format('HH:mm:ss')
  }, 1000)
})
</script>

<style lang="scss" scoped>
.header {
  position: absolute;
  z-index: var(--common-header-z-index);
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;
  background-image: url('./imgs/bg.svg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

h1 {
  font-size: 45px;
  font-weight: 400;
  color: #ffffff;
  font-family: YouSheBiaoTiHei;
  text-align: center;
  line-height: 88px;
  display: inline-block;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.16);
  pointer-events: none;
  user-select: none;
  letter-spacing: 5px;
  background: linear-gradient(180deg, #ffffff 0%, #2b94ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  margin-left: 50%;
  transform: translateX(-50%);
}

.outLogin {
  cursor: pointer;
  position: absolute;
  right: 30px;
  top: 30px;
  color: #00f8ff;
}
</style>
